import React, { useState } from "react";
import styles from "./styles.module.less"; // 引入样式文件

interface WaveInputProps {
  onSearch: (value: string) => void;
}

const WaveInput: React.FC<WaveInputProps> = ({ onSearch }) => {
  const [inputValue, setInputValue] = useState<string>("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleSearch = () => {
    onSearch(inputValue);
  };

  return (
    <div className={styles.wave_container}>
      <div className={styles.wave_group}>
        <input
          required
          type="text"
          className={styles.input}
          value={inputValue}
          onChange={handleChange}
        />
        <span className={styles.bar}></span>
        <label className={styles.label}>
          <span className={styles.label_char} style={{ "--index": 0 }}>
            请
          </span>
          <span className={styles.label_char} style={{ "--index": 1 }}>
            输
          </span>
          <span className={styles.label_char} style={{ "--index": 2 }}>
            入
          </span>
          <span className={styles.label_char} style={{ "--index": 3 }}>
            内
          </span>
          <span className={styles.label_char} style={{ "--index": 4 }}>
            容
          </span>
        </label>
      </div>
      <button className={styles.explore_button} onClick={handleSearch}>
        <svg
          viewBox="0 0 24 24"
          width="16"
          height="10"
          stroke="currentColor"
          strokeWidth="2"
          fill="none"
          strokeLinecap="round"
          strokeLinejoin="round"
          className={styles.button_icon}
        >
          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
        </svg>
        搜索
      </button>
    </div>
  );
};

export default WaveInput;
